window.onload = function() {
	
	McChart()

	function McChart() {
		Chart2();
		Chart3();
		Chart4();
	};
		

	//折线图2
	function Chart2() {
		var lineChart2 = echarts.init(document.getElementById('lineChart-2'));
		option2 = {
			title: {
//				text: '信息走势',
				textStyle: {
					fontSize: 16,
					fontWeight: 'bold',
					//          color: '#333'          // 主标题文字颜色
				},
			},
			tooltip: {
				trigger: 'axis',
//				formatter: "{a} <br/>{b}:({d}%)",
				axisPointer: {
					type: 'cross',
					animation: false,
					label: {
						backgroundColor: '#505765'
					}
				}
			},
			legend: {
			    data: ['整体趋势', '微信', '微博', '新闻','问答','论坛'],
			        align: 'left',
			        left: 10,
			        orient:'horizontal',
			        icon: 'rect'
			   
			 },
			grid: {
				left: '1%',
				right: '1%',
				bottom: '0%',
				top: '30%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['10.01', '10.02', '10.03', '10.04', '10.05', '10.06', '10.07', '10.08', '10.09', "10.10", "10.11", ],
				axisLine: {
					lineStyle: {
						color: '#d63a3b'
					},
				},
				axisLabel: { //坐标轴标签相关设置,距离颜色等
					//                      margin:7,
					//formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c
					textStyle: {
						color: "#999", //坐标轴刻度文字的颜色
						//                          fontSize:'14px' //坐标轴刻度文字的大小
					},
				},
			},
			yAxis: {
				type: 'value',
				min: '0', //坐标轴刻度最小值
				max: '5000', //坐标轴刻度的最大值
				axisLine: {
					lineStyle: {
						color: '#d63a3b'
					},
				},
				axisLabel: { //坐标轴标签相关设置,距离颜色等
					//                      margin:7,
					//formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c
					textStyle: {
						color: "#d63a3b", //坐标轴刻度文字的颜色
						//                          fontSize:'14px' //坐标轴刻度文字的大小
					},
				},
			},
			series: [{
					name: '整体趋势',
					type: 'line',
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#d63a3b', //折线颜色
						},
					},
					symbolSize: 0, //拐点大小
					data: [420, 542, 601, 1034, 1890, 1930, 1320, 820, 672, 801, 534, 390, ],
				},
				{
					name: '微信',
					type: 'line',
					symbolSize: 0, //拐点大小
					itemStyle: {
						normal: {
							color: "#17b7af", // 会设置点和线的颜色，所以需要下面定制 line
							borderColor: "#17b7af" // 点边线的颜色
						}
					},
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#17b7af', //折线颜色
						}
					},
					data: [620, 642, 1301, 1534, 1490, 1030, 2120, 4320, 972, 201, 634, 990, ],
//					markPoint: {
//						data: [{
//							type: 'max',
//							name: '最大值'
//						}, ]
//					},
				},
				{
					name: '微博',
					type: 'line',
					symbolSize: 0, //拐点大小
					itemStyle: {
						normal: {
							color: "#e873a0", // 会设置点和线的颜色，所以需要下面定制 line
							borderColor: "#e873a0" // 点边线的颜色
						}
					},
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#e873a0', //折线颜色
						}
					},
					data: [820, 842, 701, 1334, 1190, 3530, 1220, 120, 372, 501, 634, 290, ],
				},
				{
					name: '新闻',
					type: 'line',
					symbolSize: 0, //拐点大小
					itemStyle: {
						normal: {
							color: "#f69c07", // 会设置点和线的颜色，所以需要下面定制 line
							borderColor: "#f69c07" // 点边线的颜色
						}
					},
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#f69c07', //折线颜色
						}
					},
					data: [2120, 1442, 301, 2434, 1390, 530, 320, 620, 272, 1301, 1334, 290, ],
				},
				{
					name: '问答',
					type: 'line',
					symbolSize: 0, //拐点大小
					itemStyle: {
						normal: {
							color: "#2571d3", // 会设置点和线的颜色，所以需要下面定制 line
							borderColor: "#2571d3" // 点边线的颜色
						}
					},
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#2571d3', //折线颜色
						}
					},
					data: [2420, 2342, 1501, 2234, 590, 730, 120, 420, 472, 301, 1034, 690, ],
				},
				{
					name: '论坛',
					type: 'line',
					symbolSize: 0, //拐点大小
					itemStyle: {
						normal: {
							color: "#33aa4e", // 会设置点和线的颜色，所以需要下面定制 line
							borderColor: "#33aa4e" // 点边线的颜色
						}
					},
					lineStyle: { //线条的样式
						normal: {
							width: 1,
							color: '#33aa4e', //折线颜色
						}
					},
					data: [3920, 1542, 701, 3234, 490, 1330, 420, 620, 772, 2201, 534, 290, ],
				}
			]
		};
	
		lineChart2.setOption(option2)
	}
	
	//饼状图3
	
	function Chart3() {
		var pieChart = echarts.init(document.getElementById('pieChart'));
		

		option = {
			tooltip: {
				trigger: 'item',
			},
			//  legend: {
			//      orient: 'vertical',
			//      x: 'left',
			//      data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
			//  },
			series: [{

					type: 'pie',
					selectedMode: 'single',
					radius: [0, '70%'],
					hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
					label: {
						normal: {
							position: 'inner'
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [{
							value: 25,
							name: '负25%',
							itemStyle: {
								color: '#2585b8',
							},
						},
						{
							value: 10,
							name: '中10%',
							itemStyle: {
								color: '#2ea96a'
							},
						},
						{
							value: 65,
							name: '正65%',
							itemStyle: {
								color: '#ca3a3a'
							},
						}
					]
				},
				{
					type: 'pie',
					radius: ['75%', '80%'],
					hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
					label: {
						normal: {

						}
					},
					data: [{
							value: 335,
							name: '微信',
							itemStyle: {
								color: '#2585b8'
							},
						},
						{
							value: 310,
							name: '微信',
							itemStyle: {
								color: '#2585b8'
							},
						},
						{
							value: 234,
							name: '微信',
							itemStyle: {
								color: '#2ea96a'
							},
						},
						{
							value: 135,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 248,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 448,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 448,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 251,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 147,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						},
						{
							value: 102,
							name: '微信',
							itemStyle: {
								color: '#ca3a3a'
							},
						}
					]
				}
			]
		};
		pieChart.setOption(option)
	}
	
	//柱状图4

	function Chart4() {
		var barChart = echarts.init(document.getElementById('barChart'));
		var dataAxis = ['微信', '微博', '新闻', '问答', '论坛'];
		var data = [220, 310, 423, 125, 220];
		var yMax = 500;

		option = {
			title: {
//				text: '媒体相关数据统计',
			},
			tooltip: {
				trigger: 'item',
			},
			grid: {
					left: '0',
					right: '2%',
					bottom: '0',
					top: '0',
					containLabel: true
				},
			xAxis: {
				
				data: dataAxis,
				axisLabel: {
					textStyle: {
						color: '#222'
					}
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				z: 10
			},
			yAxis: {
				
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				}
			},
//			dataZoom: [{
//				type: 'inside'
//			}],
			series: [{
				type: 'bar',
				// barWidth : 16,//柱图宽度
				barMaxWidth: 16, //最大宽度
				itemStyle: {
					normal: {
						label: {
							show: true,
							textStyle: {
								fontWeight: 'bolder',
								fontSize: '12',
								color: "#dc3a38",
								fontFamily: '微软雅黑'
							},
							position: 'top'
						},
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
									offset: 0,
									color: '#f7948f'
								},
								{
									offset: 1,
									color: '#dc3a38'
								}
							]
						)
					},
					emphasis: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
									offset: 0,
									color: '#dc3a38'
								},
								{
									offset: 1,
									color: '#f7948f'
								}
							]
						)
					}
				},
				data: data
			}]
		};
		barChart.setOption(option)

	};
	
}	